<template>
  <h2 class="mt-6" v-if="showTitle">近期天气</h2>
  <div class="chart-box" v-if="Array.isArray(allWeatherData.forecasts) && allWeatherData.forecasts.length > 0">
    <div class="top">
      <div
        class="item"
        v-for="(item, index) in allWeatherData.forecasts[0].casts"
        :key="item.week"
      >
        <span>
          {{
            index === 0
              ? '今天'
              : index === 1
              ? '明天'
              : item.week === '1'
              ? '周一'
              : item.week === '2'
              ? '周二'
              : item.week === '3'
              ? '周三'
              : item.week === '4'
              ? '周四'
              : item.week === '5'
              ? '周五'
              : item.week === '6'
              ? '周六'
              : item.week === '7'
              ? '周日'
              : item.week
          }}</span
        >
        <span>{{ item.date.slice(5) }}</span>
        <span> {{ isDay ? item.dayweather : item.nightweather }}</span>
        <span>风力 {{ isDay ? item.daypower : item.nightpower }}级</span>
      </div>
    </div>
    <div class="bottom">
      <div class="chart">
        <v-chart :option="option"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue'
const props = defineProps({
    allWeatherData: {
        type: Object,
        required: true,
    },
    showTitle: {
      type: Boolean,
      default: true
  }
})

//是否白天
const isDay = ref(true)
const checkDayOrNight = () => {
  const hour = new Date().getHours()
  isDay.value = hour >= 6 && hour < 18
}
//图表配置
const option = ref({})
const daytemp = ref('')
const nighttemp = ref('')
const renderChart = (daytemp, nighttemp) => {
  let dayData = ref('')
  let nightData = ref('')
  if (daytemp) {
    dayData = daytemp.map((item) => ({
      value: Number(item),
      name: `白${item}℃`,
    }))
  }
  if (nighttemp) {
    nightData = nighttemp.map((item) => ({
      value: Number(item),
      name: `黑${item}℃`,
    }))
  }
  option.value = {
    xAxis: {
      type: 'category',
      show: false,
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: {
      left: 0,
      right: 0,
      top:30,
      bottom:20,
    },
    series: [
      {
        type: 'line',
        data: dayData,
        itemStyle: {
          color: 'rgb(56,100,170)',
        },
        lineStyle: {
          color: 'rgb(56,100,170)',
          width: 2,
        },
        smooth: true,
        label: {
          show: true,
          position: 'top',
          color: '#ffffff',
          fontSize: 12,
          formatter: function (params) {
            return params.data.name
          },
        },
      },
      {
        type: 'line',
        data: nightData,
        itemStyle: {
          color: '#71b173',
        },
        lineStyle: {
          color: '#71b173',
          width: 2,
        },
        smooth: true,
        label: {
          show: true,
          position: 'bottom',
          color: '#ffffff',
          fontSize: 12,
          formatter: function (params) {
            return params.data.name
          },
        },
      },
    ],
  }
}
watch(
  () => props.allWeatherData, 
  (newVal) => {
    if (newVal?.forecasts?.[0]?.casts) {
       daytemp.value = newVal.forecasts[0].casts.map(item => item.daytemp)
       nighttemp.value = newVal.forecasts[0].casts.map(item => item.nighttemp)
       renderChart(daytemp.value, nighttemp.value) 
    }
  },
  { immediate: true }  
)
</script>

<style scoped>
    .mt-6 {
      margin-top: 1.5rem;
      font-size: inherit;
      font-weight: inherit;
    }
    .chart-box {
      background-color: rgba(0, 78, 113, 1);
      padding-left: 3rem;
      padding-right: 3rem;
      padding-top: 2.5rem;
      margin-top: 0.5rem;
      border-radius: 0.25rem;
      .top {
        display: flex;
        gap: 1.5rem;
        background-color: rgba(0, 78, 113, 1);
        .item {
          display: flex;
          flex-direction: column;
          flex: 1 1 0%;
          text-align: center;
          gap: 1rem;
          background-color: transparent;
        }
      }
      .bottom {
        margin-top: 2.5rem;
        height: 10rem;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        .chart {
          background-color: rgba(0, 78, 113, 1);
          position: relative;
          width: 1120px;
          height: 160px;
          padding: 0px;
          margin: 0px;
          border-width: 0px;
          cursor: default;
        }
      }
    }
</style>
